<template>
	<view>
		<view class="headerWrapper">
			<view class="headerCharacter">
				<view class="userName"><text>{{info.name}}</text><text style="font-size: 26rpx;"></text>
				</view>
				<view class="companyName">
					<image src="@/static/image/building.png" mode=""></image> {{info.sub_unit_name}}
				</view>
			</view>
			<view class="headPic">
				<image src="https://s4.kaoshixing.com/static/base/images/user/default-picture.png?v=9d4db3ef54" mode="">
				</image>
			</view>
		</view>
		<view class="bodyWrapper">
			<!-- <view class="list" v-for="(item,index) in list" @click="jump(item.toUrl)" :key="index">
				<view class="item">
					<image :src="item.icon"></image>{{item.title}}
				</view>
				<view class="right">
					<image src="@/static/right.png"></image>
				</view>
			</view> -->
			<view class="list" @click="hanldeUserInfo">
				<view class="item">
					<image src="@/static/image/test.png"></image>基本信息
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
			<view class="list" @click="hanldeMsgList">
				<view class="item">
					<image src="@/static/image/test.png"></image>消息记录
					<up-badge v-if="count>0" class="mar-left-20 mar-bottom-10" type="error" max="99" :value="count"></up-badge>
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
			<!-- <view class="list" @click="jump('/pages/study/index')" style="position: relative;">
				<view class="item">
					<image src="@/static/image/study.png"></image>学习任务
					<u-badge type="error" :count="unreadTask" :offset="[35,520]" absolute size="mini"></u-badge>
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view> -->
			<!-- <view class="list" @click="jump('/pages/practicalExamination/practicalExamination')">
				<view class="item">
					<image src="@/static/image/test.png"></image>实操考试
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view> -->
			
			<view class="list" @click="hanldeAchie">
				<view class="item">
					<image src="@/static/image/test.png"></image>考试成绩
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
			<view class="list" @click="hanldeWrong">
				<view class="item">
					<image src="@/static/image/test.png"></image>错题集
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
			<view class="list" @click="hanldeLearning">
				<view class="item">
					<image src="@/static/image/test.png"></image>学习记录
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
			<view class="list" @click="openLogoutModal">
				<view class="item">
					<image src="@/static/image/logout.png"></image>退出登录
				</view>
				<view class="right">
					<image src="@/static/image/right.png"></image>
				</view>
			</view>
		</view>
		<!-- <u-tabbar :list="tabBarList" bg-color=" #fff" inactive-color="#ACACAC" active-color="#487eff"></u-tabbar> -->
		<!-- <up-modal v-model="show" confirm-text="确定" confirm-color="#D43C33" :show-title="false" content="您是否要退出登录"
			:show-cancel-button="true" @confirm="loginOutConfirm"></up-modal> -->
		<up-modal showCancelButton confirm-color="#D43C33" @cancel="show = false" :show="show"
			@confirm="loginOutConfirm" title="退出登录" content='你确定退出登录吗？'></up-modal>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 接口引入
	import {
		myInfo,
		messageUnread
	} from '/config/api.js';

	import {
		onShow
	} from '@dcloudio/uni-app'
	
	// 跳转基本信息
	const hanldeUserInfo = () =>{
		uni.navigateTo({
			url:'/pages/userInfo/userInfo'
		})
	}

	// 跳转考试列表
	const hanldeAchie = () => {
		uni.navigateTo({
			url: '/pages/achie/achie'
		})
	}
	
	// 跳转消息列表
	const hanldeMsgList  = () =>{
		uni.navigateTo({
			url: '/pages/msgList/msgList'
		})
	}

	// 跳转去错题集
	const hanldeWrong = () => {
		uni.navigateTo({
			url: '/pages/wrong/wrong'
		})
	}
	
	// 跳转学习记录
	const hanldeLearning = () =>{
		uni.navigateTo({
			url: '/pages/learning/learning'
		})
	}

	// 打开退出登录
	let show = ref(false);
	const openLogoutModal = () => {
		show.value = true;
	}

	// 确定退出登录		
	const loginOutConfirm = () => {
		show.value = false;
		uni.removeStorageSync('token');

		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/login/login'
			})
		})
	}

	let info = ref({});
	let count = ref(0)
	onShow(() => {
		// 获取用户信息
		myInfo().then(res => {
			info.value = res.data;
		})
		
		// 获取未读消息
		messageUnread().then(res =>{
			count.value = res.data.count;
		})
	})
</script>

<script>
	export default {
		data() {
			return {
				list: [{
					icon: '/static/mysignup.png',
					title: '我的报名',
					toUrl: '/pages/webViewPage/webViewPage?url=' + encodeURIComponent(JSON.stringify(
						'/applets/my/sign_list.html?')) + '&&title=我的报名',
				}, {
					icon: '/static/personal.png',
					title: '个人信息',
					toUrl: '/pages/personalInfo/personalInfo'
				}, {
					icon: '/static/editPass.png',
					title: '修改密码',
					toUrl: '/pages/editPassword/editPassword'
				}],
				show: false,
				userInfo: {},
				unreadTask: 0
			}
		},
		methods: {
			jump(url) {
				console.log(url);
				uni.navigateTo({
					url: url
				})
			},
			loginOutConfirm() {
				this.$store.commit('logout')
			}
		}
	}
</script>

<style scoped>
	.headerWrapper {
		height: 400rpx;
		width: 100%;
		background-image: url('@/static/image/m-user-info-bg.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.headerWrapper .headPic {
		width: 130rpx;
		height: 130rpx;
	}

	.headerWrapper .headPic image {
		width: 100%;
		height: 100%;
	}

	.userName {
		font-size: 52rpx;
		font-weight: 500;
		color: #27274A;
		line-height: 78rpx;
	}

	.companyName image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5rpx;
	}

	.list {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
	}

	.list .item image {
		margin-right: 10rpx;
	}

	.list .item {
		display: flex;
		align-items: center;
	}

	.list image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 5rpx;
	}
	
	.bodyWrapper{
		border-top: 20rpx solid #F5F5F5;
	}
</style>